<template>
  <div class="map">
    百度地图使用示例

    <div id="container" style="width: 600px; height: 600px;"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from 'vue';

onMounted(() => {
  // @ts-ignore
  var map = new window.BMapGL.Map('container'); // 创建Map实例
  // @ts-ignore
  map.centerAndZoom(new window.BMapGL.Point(104.04766,30.636829), 18); // 初始化地图,设置中心点坐标和地图级别
  // map.centerAndZoom(new window.BMapGL.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

  // 创建点标记
  // @ts-ignore
  var marker1 = new BMapGL.Marker(new BMapGL.Point(104.04766,30.636829));
  // 在地图上添加点标记
  map.addOverlay(marker1);

  // 步行路线规划
  // @ts-ignore
  var walking = new BMapGL.WalkingRoute(map, {renderOptions:{map: map, autoViewport: true}});
  walking.search('肖家河大厦', '高升桥地铁站');
})
</script>

<style lang="less" scoped>

</style>
